<template>
    <div class="contentLayout attentionMatter">
        <pathTracking :path='path' />
        <div class="pageContent">
            <p v-if="showCreate" @click="createBtn" class="createBtn"><img src="@/assets/img/button_plus.png" class="iconPlus" />新建事项</p>
            <div class="content_box">
                <!--表格头部-->
                <div class="tableTitle tableTitleBig">
                    <div class="tableIcon"></div>
                    <div class="tableText">注意事项列表</div>
                </div>
                <el-row style="padding: 0 16px;background: #FFF;">
                    <tabelcom
                        :total="total"
                        :pageSize="pageSize"
                        :pageNum='pageNum'
                        :pageTotal="pageTotal"
                        :tableData="noticeData"
                        @selectedHighlight="selectedHighlight"
                        :columns="tableHeader"
                        @edit="edit"
                        :isShowSee='isShowSee'
                        :isShowEdit="isShowEdit"
                        @deleteBtn="deleteBtn"
                        :isShowDel='isShowDel'
                        @handleSelectionChange="handleSelectionChange"
                        @handleSizeChange="handleSizeChange"
                        @handleCurrentChange="handleCurrentChange"
                        :rightW="rightW"
                        :showEditBtn="showEditBtn"
                        :doDelete="doDelete"
                    />
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import pathTracking from '@/components/common/pathTracking'// 面包屑路径
import tabelcom from '../components/table'
import datas from './datas.js'
import _axios from '@/tool/http.js'
// 获取按钮权限配置的方法
import operationConfig from '@/utils/btnsPermission'

export default {
    name:'attentionMatter',
    components: {
        tabelcom,
        pathTracking,
    },
    data(){
        return{
            path: ['CRM', '营销宝典', '注意事项'],

            noticeData:[],
            tableHeader:datas.tableHeader,
            total:0, //总条数
			pageSize:10, //每页多少条
			pageNum:0,//当前第几页
            pageTotal:0,//总页数

            isShowSee:false,
            isShowDel:true,
            isShowEdit:true,
            //id:''
            rightW:200,

            showEditBtn: false,
            doDelete: false,
            showCreate: false
        }
        
    },
    methods:{
        toSearch(val){

        },
        edit(par){ //编辑
            //console.log('编辑',par.id)
            this.$router.push({name:'editMatter',query:{id:par.id}})
        },
        createBtn(){
            this.$router.push({name:'createMatter'})
        },
        deleteBtn(par) {
            this.$confirm('确定要删除该事项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteInfo(par)
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        deleteInfo(par){
            var that = this;
			that.$ajax({
				url:api.crm + '/noticesInfo/'+ par.id,
				method:'DELETE',
			}).then((res) => {
                //console.log('删除',res)
                var data = res.data;
                if(data.status == 200){
                    that.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    that.getNoticeInfo()
                }
            })
        },

        selectedHighlight (data) {
            // 如果选中则添加高亮样式
            if (this.TableSelectData.indexOf(data.row) > -1) {
                return {
                'background-color': '#FEF6EE'
                }
                return {}
            }
        },
        // 分页
        handleSizeChange (val) { //每页多少条
            this.pageSize = val;
            this.getNoticeInfo()
        },
        handleCurrentChange (val) { //当前第几页
            this.pageNum = val;
            this.getNoticeInfo()
        },
        handleSelectionChange (selection) {
        // 选中的数组
            //this.TableSelectData = selection
        },
        //获取事项列表信息
        getNoticeInfo(){
            var that = this;
			that.$ajax({
				url:api.crm + '/noticesInfo/list/'+ this.pageSize + '/' + this.pageNum,
				method:'POST',
				data:{},
			}).then((res) => {
                var data = res.data;
                that.noticeData =[]
                if(data.status == 200){
                    var noticeArr = data.result.list;
                    //console.log('获取列表数据成功',noticeArr);
                    that.total = data.result.total;  //全部条数
					that.pageNum = data.result.pageNum; //当前页
					that.pageSize = data.result.pageSize; //每页数量
					that.pageTotal = data.result.pages;//总页数
                    if(noticeArr){
                        noticeArr.forEach(el => {
                          //console.log('ellll',el)
                          var noticeObj = {
                            content:el.content,
                            customerClassify:el.customerClassify,
                            id:el.id
                          } 
                          if(noticeObj.customerClassify == 1){
                              noticeObj.customerClassify = '已成交客户'
                          }else{
                              noticeObj.customerClassify = '未成交客户'
                          }
                          that.noticeData.push(noticeObj) 
                        });

                    }
                }else{
                    //console.log('获取列表数据失败')
                    that.$message({
                        message: '获取列表数据失败',
                        type: 'warning'
                    });
                }
            }).catch((err) =>{
                that.$message({
                    message: err.data.msg,
                    type: 'warning'
                });
            })
        },
        // 按钮权限
        btnsControl() {
            let permission = operationConfig(this.$route);
            this.showEditBtn = false
            this.doDelete = false
            this.showCreate = false
            permission.forEach(ele => {
                if(ele.menu_name === '编辑') {
                    this.showEditBtn = true
                }else if(ele.menu_name === '删除') {
                    this.doDelete = true
                }else if(ele.menu_name === '新建事项') {
                    this.showCreate = true
                }
            })
        }
    },
    created(){
        this.getNoticeInfo()
        this.btnsControl()
    },
    activated() {
        this.getNoticeInfo()
        this.btnsControl()
    }
}
</script>
<style>
@import '../../customerManagement/components/css/viewCommon.css';
.el-message-box__status.el-icon-warning{
    display: none;
}
.tableBtn button.deleteBtn{
    border:1px #fd5846 solid !important;
    color:#fd5846 !important
}

</style>

<style scoped>
.pageContent{
    padding: 16px;
}
.content_box{
    width: 100%;
    box-sizing: border-box;
    background-color: #f3f3f3;
    border-radius: 8px;
    overflow: hidden;
}
.createBtn{
    height: 40px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: #7E6B5A;
    color: #FFF;
    text-align: center;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}
.iconPlus{
    width: 12px;
    height: 12px;
    margin-right: 4px
}
.iconLayout{
    width: 12px;
    height: 12px;
    margin-right: 4px;
}
.contentLayout .navContent{
    margin-top:24px;
}
.tableLayout .tableInfo{
    padding: 0 16px;
    background: #fff;
}
.deleteBtn{
    background-color:#222;
    color:#fff
}
</style>
